import React from "react";
import ReactDom from "react-dom"
import './05.css'
// 子元素向父元素传递数据
/*
* 父组件传递函数给子组件，子组件通过此函数修改父组件的state
* */
class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: ''
        }
    }

    sendData2Parent = () => {
        this.props.getDataFromChild(document.querySelector('input').value)
    }

    render() {
        return (
            <div>
                <div>这是子组件</div>
                <input type="text" onChange={this.sendData2Parent}/>
            </div>
        );
    }
}

class Parent extends React.Component {
    constructor() {
        super();
        this.state = {
            childContent: ''
        }
    }

    getDataFromChild = (data) => {
        this.setState({
            childContent: data
        })
    }

    render() {
        return (
            <div>
                <Child getDataFromChild={this.getDataFromChild}/>
                <div>这是父组件</div>
                <p>来自子元素到数据：{this.state.childContent}</p>
            </div>
        );
    }
}

ReactDom.render(
    <Parent/>,
    document.querySelector('#root')
)